<template>
	<view>
		<view class="home-header card">
			<view class="container" v-if="archivesData.archivesId">
				<view class="left-btn-bar">
					<view class="left-btn-bar-title"><text class="select-font">当前案卷：{{ archivesData.name }}</text>
					</view>
					<view class="tag-list">
						<!-- 案卷状态 是否归档 -->
						<view class="tag-item" v-if="archivesData.state || archivesData.state == 0">
							<!-- <text class="tags">{{ ARCHIVES_STATE_NAMES[archivesData.state] }}</text>
							 -->
							<u-tag :text="archiveStateLabel" :type="archiveStateTag" />
						</view>
						<!-- 案卷类型 -->
						<view class="tag-item">
							<!-- <text class="tags">{{ ARCHIVES_TYPE_NAMES[archivesData.archivesType] }}</text> -->
							<u-tag :text="archiveTypeLabel" :type="archiveTypeTag" />
						</view>
						<!-- 同步状态 -->
						<view class="tag-item sync-status" @click="onSyncArchives">
							<u-tag :text="syncStatusLabel" :type="syncStatusTag" />
							<!-- 	<text
								class="tags">{{ SYNC_STATUS_NAMES[archivesData.syncStatus] || SYNC_STATUS_NAMES[0] }}</text> -->
						</view>
						<!-- <view class="tag-item"><text class="tags">重大火灾</text></view> -->
					</view>
				</view>
				<view class="select-bar">
					<!-- v-if="this.vuex_config.isConnected" -->
					<!-- <button class="btn m-r-10" type="primary" size="mini"
						@click="uploadArchives">上传</button>
					<button  class="btn m-r-10" type="primary" size="mini" @click="downloadArchives">下载</button> -->
					<button v-if="archivesData.state == '0'" class="btn m-r-10" :disabled="closeDisabled" type="primary"
						size="mini" @click="closeBase">结案归档</button>
					<button class="btn m-r-10" :disabled="true" type="primary" size="mini">案卷二维码</button>
				</view>
			</view>
			<view class="empty-container" v-else>
				<image class="empty-img" src="../../../../static/aidex/images/detail-logo.png" mode=""></image>
				<text class="empty-text">消防火调终端</text>
			</view>
		</view>
		<view class="space"></view>
	</view>
</template>

<script>
	import {
		ARCHIVES_TYPE,
		ARCHIVES_TYPE_NAMES,
		SYNC_STATUS_TYPE,
		SYNC_STATUS_NAMES,
		ARCHIVES_STATE,
		ARCHIVES_STATE_NAMES
	} from '@/const/archives/index.js'
	export default {
		data() {
			return {
				archivesData: {},
				closeDisabled: false,
				statusBarHeight: '0',
				isHaveCon: false,
				slightDis: false,
			}
		},
		computed: {
			archiveStateLabel() {
				return ARCHIVES_STATE_NAMES[this.archivesData.state] || ARCHIVES_STATE_NAMES[INVESTIGATE]
			},
			archiveStateTag() {
				const typeMap = {
					[ARCHIVES_STATE.INVESTIGATE]: 'error',
					[ARCHIVES_STATE.CLOSECASE]: 'success',
				}
				return typeMap[this.archivesData.state] || 'error'
			},
			archiveTypeLabel() {
				return ARCHIVES_TYPE_NAMES[this.archivesData.archivesType]
			},
			archiveTypeTag() {
				const typeMap = {
					[ARCHIVES_TYPE.SIMPLE]: "success",
					[ARCHIVES_TYPE.COMMONLY]: "primary",
					[ARCHIVES_TYPE.SLIGHT]: "error",
				}
				return typeMap[this.archivesData.archivesType] || 'error'
			},
			syncStatusLabel() {
				return SYNC_STATUS_NAMES[this.archivesData.syncStatus] || SYNC_STATUS_NAMES[SYNC_STATUS_TYPE
					.NOT_UPWARD_SYNCED]
			},
			syncStatusTag() {
				const {
					NOT_UPWARD_SYNCED,
					PENDING_UPWARD_UPDATE,
					NOT_DOWNWARD_SYNCED,
					PENDING_DOWNWARD_UPDATE,
					SYNCED
				} = SYNC_STATUS_TYPE
				const typeMap = {
					[NOT_UPWARD_SYNCED]: 'warning',
					[PENDING_UPWARD_UPDATE]: 'error',
					[NOT_DOWNWARD_SYNCED]: 'warning',
					[PENDING_DOWNWARD_UPDATE]: 'error',
					[SYNCED]: 'success',
				}
				return typeMap[this.archivesData.syncStatus] || 'info'
			},
		},
		created() {
			uni.$on('getArchivesinfo', info => {
				console.log("head archivesinfo:", info.archivesId);
				this.archivesData = info;
			});
			uni.$on('archivesDis', e => {
				this.closeDisabled = e;
			});
		},
		beforeDestroy() {
			uni.$off('archivesinfo');
			uni.$off('archivesDis');
		},
		methods: {
			closeBase() {
				uni.$emit('closeBase')
			},
			backHome() {
				try {
					console.log('backHome');
					uni.removeStorageSync('archivesDis');
				} catch (e) {
					// error
					console.log('catch');
				}
				uni.navigateBack()
			},
			onSyncArchives() {
				uni.$emit('onSyncArchives', this.archivesData)
			}
		}
	}
</script>

<style lang="scss">
	.home-header {
		width: 100%;
		padding: 32rpx 40rpx 30rpx;
	}

	.container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.left-btn-bar {
		overflow: hidden;
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.left-btn-bar-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		max-width: 612rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-line-clamp: 1;
		// -webkit-box-orient: vertical;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.tag-list {
		flex: 1;
		display: flex;
		flex-direction: row;
		height: 32px;
	}

	.tag-item {
		// background-color: #fef0f0;
		// border: 2rpx solid #E30505;
		margin: 0 16rpx;
		// border-radius: 8rpx;
		display: flex;
		align-items: center;
		// padding: 0 18rpx;
		// background: none;
		// padding: 0;
		// border: none;
	}

	// .sync-status {
	// 	background: none;
	// 	padding: 0;
	// 	border: none;
	// }

	.tag-item .u-tag {
		width: 152rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		padding-left: 18rpx;
		padding-right: 18rpx;
	}

	.tags {
		font-size: 28rpx;
		color: #E30505;
	}

	.m-r-10 {
		margin-right: 32rpx;
	}

	.empty-container {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.empty-img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 14rpx;
	}

	.empty-text {
		font-size: 36rpx;
		font-weight: bold;
		color: $u-content-color;
	}
</style>